<template>
<!-- 搜索弹出层 -->
  <div class="search-popup">
      <!-- 搜索栏 -->
      <van-search
        v-model="searchVal"
        show-action
        :placeholder="placeVal"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />

      <!-- 底下展示3个界面之一 ，但不涉及路由跳转，做成组件-->
      <HistoryHot 
        v-if="blockShow==1" 
        :historyKeywordList="historyKeywordList"
        :hotKeywordList="hotKeywordList"
        @tagClick="tagClick"
      />
      <SearchTipsList 
        v-else-if="blockShow==2"
        :searchTipsListData="searchTipsListData"
        @tagClick="tagClick"
      />
      <SearchProductList 
        v-else-if="blockShow==3"
        :productsListData="productsListData"
        :filterCategory="filterCategory"
        @categoryChange="categoryChange"
        @priceChange="priceChange"
      />

  </div>

</template>

<script>
import HistoryHot from "@/components/search/HistoryHot"
import SearchTipsList from "@/components/search/SearchTipsList"
import SearchProductList from "@/components/search/SearchProductList"
import {mapMutations} from "vuex"
import {GetHishotData, GetSearchTipsData, GetGoodsListData} from "@/request/api"
export default {
  components:{
      HistoryHot,SearchTipsList,SearchProductList
  },
  data () {
    return {
      // 搜索框的值，用户输入的值
      searchVal:"",
      // 搜索框中的提示热词
      placeVal:"",
      // blockShow变量用来控制切换搜索页面对应的界面
      // 1 表示 历史和热门界面
      // 2 表示 搜索提示列表
      // 3 表示 搜索产品列表
      blockShow:1,
      // 历史记录的数组
      historyKeywordList:[],
      // 热门搜索数组
      hotKeywordList:[],
      // 搜索提示列表的数据
      searchTipsListData:[],
      // 搜索产品列表的数据
      productsListData:[],
      // 产品列表的分类数据
      filterCategory:[],
      // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
      order: "desc",
      // sort 可以是id或price 排序方式
      sort: "id",
      // 分类id
      categoryId:0,
      // 防抖处理的定时器
      timer:null
    }
  },
  created(){
    // 请求历史记录和热门搜索数据
    GetHishotData().then(res=>{
        let {defaultKeyword, historyKeywordList, hotKeywordList} = res.data

        this.placeVal = defaultKeyword.keyword
        this.historyKeywordList = historyKeywordList
        this.hotKeywordList = hotKeywordList
    })


  },
  methods:{
    tagClick(value){
      this.searchVal = value;
      this.onSearch(value)
    },
    priceChange(value){
      this.sort = "price";
      this.order = value;
      // 发送搜索请求
      this.onSearch(this.searchVal)
    },
    categoryChange(id){
      this.categoryId = id;
      // 发送搜索请求
      this.onSearch(this.searchVal)
    },
    ...mapMutations({
      chanIsShowShadow:"showshadow/chanIsShowShadow"
    }),

    onSearch(value){ // value就是用户输入的内容
      // 回车之后执行这里的代码
      // 搜索的时候
      this.blockShow = 3;
      // 发起搜索请求
      GetGoodsListData({
        keyword:value,
        // 细化搜索请求：为后面点击 价格由高到低(低到高)，或者点击分类选项 发起请求做准备
        order: this.order,   // 告诉后端是由高到低或者低到高
        sort:this.sort,   // 告诉后端按照id排序还是price来排序
        categoryId: this.categoryId, // 请求的分类id
      }).then(res=>{
        // console.log(res.data);
        // 解构的方式
        let {data, filterCategory} = res.data
        this.productsListData = data;

      // 后端给我们的数据：
      //   [{id: 0, name: "全部", checked: true},
      // {id: 1005001, name: "餐厨", checked: false},
      // {id: 1005000, name: "居家", checked: false},
      // {id: 1008000, name: "配件", checked: false},]

      // 而我们需要的数据格式如下：
      // [
      //   { text: '全部', value: 'a' ,checked: false},
      //   { text: '居家', value: 'b' ,checked: false},
      // ]
      //  把name处理成 text，   把id处理成  value， 但是数据还是原来的数据
      let newArr = filterCategory.map(item=>{
        // return 就是新数组每个元素的样子
        return { text: item.name , value: item.id,  checked:item.checked}
      })

      this.filterCategory = newArr;
    // 总结经验 ： 有时候，后端给我们的数据跟我们需要的格式有点不一样，我们就需要把后端给我们的数据处理成我们自己想要的格式。
      })
    
    },
    onCancel(){

      this.$router.go(-1);
      this.chanIsShowShadow(false);
      // this.$router.push("/home")
    },
    onInput(value){
      // 防抖   在每一次执行操作的时候，先判断定时器启动了没有，如果启动了，就应该先清除定时器
      // 减少输入期间的请求
      // if(下面这个定时器启动了){
      //     清除下面这个定时器
      // }
      if(this.timer){
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(()=>{
      // value 就是用户输入的内容
      // 用户正在输入的时候，要切换到第2个界面
        this.blockShow = 2;
      // 发送请求，请求和用户输入相关的提示
        console.log(value);
        GetSearchTipsData({
          keyword:value
        }).then(res=>{
            // console.log(res.data);
            this.searchTipsListData = res.data
        })  
      },500);
      
    }
  }
}
</script>
 
<style lang = "less" scoped>

  .search-popup{
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    background-color: #efefef;
    z-index: 100;
  }
</style>